<html>
<head>
    <title>Teeth Reuinion</title>
    
    <link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
    <link rel="stylesheet" type="text/css" href="jqueryui/css/ui-lightness/jquery-ui-1.10.4.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jqueryui/js/jquery-ui-1.10.4.min.js"></script> 
    <script type="text/javascript" src="js/jquery.plugin.js"></script> 
    <script type="text/javascript" src="js/jquery.countdown.js"></script>
    <script>
      $(function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
      });
    </script>
</head>
<body>
<div id="header">
    <a href="index.php"><img src="images/teeth-logo.png"></a>
</div>
<div id="form">
    <h3>Reserve Tickets</h3>
    <form action="../homepage/reserve_slot" id="reservation" method="post">
        <input type="text" placeholder="Firstname" name="strFirstname" >
        <div class="error error_firstname"></div>
        <input type="text" placeholder="Lastname" name="strLastname" >
        <div class="error error_lastname"></div>
        <input type="text" placeholder="Email Address" name="strEmailAddress">
        <div class="error error_email"></div>
        <input type="text" placeholder="091XXXXXXXX 11-digit Mobile Number" name="strMobileNumber">
        <div class="error error_mobile"></div>
        <input type="text" placeholder="Birthdate" name="dteBirthdate" id="datepicker" value="04/21/1984">
        <div class="error error_bdate"></div>
        <input type="submit" value="Reserve" class="right ui-button ui-widget ui-state-default ui-corner-all">
        <div style="clear:both"></div>
    </form>
    
</div>
<script>
    $(document).ready(function(){
        var submit_this = 0;
        
        $("#reservation").on('submit',function(e){
        if(submit_this == 0){
            e.preventDefault();
            data = {
                    'strFirstname':$('input[name="strFirstname"]').val(),
                    'strLastname':$('input[name="strLastname"]').val(),
                    'strEmailAddress':$('input[name="strEmailAddress"]').val(),
                    'strMobileNumber':$('input[name="strMobileNumber"]').val(),
                    'dteBirthdate':$('input[name="dteBirthdate"]').val()

                   }
            $.ajax({
                url:'../homepage/reserve_slot_validate',
                type:'post',
                dataType:'json',
                data:data,
                success:function(resp)
                {
                    if(resp.success == 1){
                        $("#reservation").submit();
                        submit_this = 1;
                    }
                    else{
                        $(".error_firstname").html(resp.error_firstname); 
                        $(".error_lastname").html(resp.error_lastname);  
                        $(".error_email").html(resp.error_email);  
                        $(".error_mobile").html(resp.error_mobile);  
                        $(".error_bdate").html(resp.error_bdate);  
                    }
                }


            });
        }
        });
    });
</script>
</body>    
    
    
</html>